<template>
  <div class="container">
    <div class="logo">
      <img v-if="registerLogoUrl" :src="registerLogoUrl" alt="logo" class="height-100" border="0px">
    </div>
    <div v-show="step === 1" class="form-box">
      <el-form class="form" autoComplete="on" :model="form" :rules="rules" ref="form" label-position="left"
        label-width="130px">
        <el-form-item prop="phone" label="手机号">
          <el-input name="phone" type="text" maxlength="11" v-model="form.phone" @keyup.native="phoneEls(form.phone)"
            autoComplete="on" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item prop="code" label="验证码">
          <el-row>
            <el-col :span="16">
              <el-input name="code" type="text" v-model="form.code" autoComplete="on" placeholder="填写验证码" />
            </el-col>
            <el-col :span="8" class="text-align-r">
              <el-button class="code-btn" :disabled="disabled" :loading="codeBtnLoading" @click="getSmsCode">
                {{ btnTxt }}</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <el-button type="primary" class="btn" :loading="loading" @click="doCheckSmsCode">下一步</el-button>
    </div>
    <div v-show="step === 2" class="form-box">
      <el-form class="form" autoComplete="on" :model="form" :rules="rules" ref="form" label-position="left"
        label-width="130px">
        <el-form-item prop="username" label="设置密码">
          <el-input name="username" type="password" maxlength="11" v-model="form.password" autoComplete="on"
            placeholder="设置密码" />
        </el-form-item>
        <el-form-item prop="username" label="确认密码">
          <el-input name="username" type="password" maxlength="11" v-model="form.passwordAgain" autoComplete="on"
            placeholder="确认密码" />
        </el-form-item>
      </el-form>
      <el-button type="primary" class="btn" :loading="loading" @click="updatePwd">确认重置</el-button>
    </div>
  </div>
</template>

<script>
  import img_logo from '@/assets/images/login-logo-2.png'
  import {
    isvalidatePhone
  } from '@/utils/validate'
  import {
    getValidateCode,
    sendSms,
    doCheckSmsCode,
    updatePwdByToken,
    getConfigByDomain
  } from '@/api/login'
  export default {
    name: 'forgetpw',
    data() {
      const validatePhone = (rule, value, callback) => {
        if (!isvalidatePhone(value)) {
          callback(new Error('手机号码输入有误'))
        } else {
          callback()
        }
      }
      return {
        img_logo: img_logo,
        loading: false,
        disabled: true,
        codeBtnLoading: false,
        registerLogoUrl: '', // 注册页logo
        time: 0,
        form: {
          phone: '',
          code: ''
        },
        rules: {
          phone: [{
            required: true,
            trigger: 'blur',
            validator: validatePhone
          }],
          code: [{
            required: true,
            message: '验证码不能为空',
            trigger: 'blur'
          }]
        },
        btnTxt: '获取验证码',
        step: 1,
        accessToken: 1,
        validateCode: '',
        submitStatus: false
      }
    },
    watch: {},
    mounted() {
      this.getConfigByDomain()
    },
    methods: {
      // 获取背景图、logo信息
      getConfigByDomain() {
        const DOMAIN = window.location.host
        getConfigByDomain(DOMAIN).then(response => {
          const res = response.data
          this.registerLogoUrl = res.registerLogoUrl || img_logo
          document.title = res.indexTitle || '众项云企'
          this.$pt.setStorageSync('document.title', document.title)
          this.$pt.setStorageSync('document.ico', res.indexIco)
        }).catch(err => {
          console.log(err)
        })
      },
      phoneEls(val) {
        if (isvalidatePhone(val)) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
      getSmsCode() {
        const that = this
        if (!isvalidatePhone(this.form.phone)) {
          this.$message.error('手机号码输入有误')
          return false
        }
        getValidateCode(that.form.phone).then(response => {
          if (response.isError) return
          that.validateCode = response.data
          that.codeBtnLoading = true
          sendSms(that.form.phone, that.validateCode, 2).then((response) => {
            that.codeBtnLoading = false
            if (response.isError) return
            that.time = 60
            that.timer()
            this.$message({
              message: '发送成功！',
              type: 'success'
            })
          }, (response) => {
            that.codeBtnLoading = false
            this.$message({
              message: '网络错误',
              type: 'error'
            })
          })
        })
      },
      doCheckSmsCode() {
        if (!this.form.phone || !this.form.code) {
          return
        }
        doCheckSmsCode(this.form.phone, this.form.code, 2).then(response => {
          if (response.isError) return
          this.accessToken = response.data.token
          this.step = 2
        })
      },
      timer() {
        if (this.time > 0) {
          this.time--
          this.btnTxt = this.time + 's后重新获取'
          this.disabled = true
          setTimeout(this.timer, 1000)
        } else {
          this.time = 0
          this.btnTxt = '获取验证码'
          this.disabled = false
        }
      },
      updatePwd() {
        if (this.form.password !== this.form.passwordAgain) {
          this.$message.error('两次输入密码不一致')
          return
        }
        if (this.form.password.length < 6) {
          this.$message.error('密码长度不能小于6')
          return
        }
        if (this.submitStatus) {
          return
        }
        this.submitStatus = true
        const that = this
        updatePwdByToken(this.accessToken, this.form.password).then(response => {
          this.submitStatus = false
          if (response.isError) return
          this.$message({
            message: '密码重置成功！',
            type: 'success'
          })
          that.form.validateCode = that.validateCode
          that.$store.dispatch('LoginByPhone', that.form).then(() => {
            that.$router.push({
              path: '/'
            })
          }).catch(() => {})
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .container {
    background: #f2f2f2;
    min-height: calc(100vh);

    .logo {
      padding: 58px 0 60px 0;
      width: 362px;
      margin: 0 auto;
    }

    .form-box {
      width: 580px;
      margin: 0 auto;
      box-sizing: border-box;
    }

    .form {
      background: #ffffff;
      padding: 35px 38px;
      border-radius: 10px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

    .code-btn {
      background: #409eff !important;
      border: 1px solid #409eff !important;
      color: #fff !important;
      border-radius: 10px !important;
      padding: 16px 0px;
      font-size: 12px;
      width: 115px;
      text-align: center;

      &:hover {
        background: #409eff;
        border: 1px solid #409eff;
        color: #fff;
      }

      &[disabled] {
        background: #cccccc !important;
        border: 1px solid #cccccc !important;
      }
    }

    .btn {
      display: block;
      box-sizing: border-box;
      width: 100%;
      margin-top: 30px;
      font-size: 20px;
      border-radius: 8px;
      font-weight: bold;
      padding: 24px 20px;
    }
  }
</style>
